<template>
  <div class="cart">
    <van-nav-bar title="购物车(0)">
      <template #right>
        <img class="home" @click="goSome('home')" :src="require('@/assets/img/cart/home.png')">
        <img class="person" @click="goSome('mine')" :src="require('@/assets/img/cart/person.png')">
      </template>
    </van-nav-bar>

    <div class="goods" v-if="this.getCartGoods().length > 0">
      <div class="content">
        <div class="items">
          <div class="item" v-for="item in this.getCartGoods()" :key="item.id">
            <div class="left">
              <input @change="updateCart(item)" type="checkbox" v-model="item.sel" :id="item.id">
              <label :for="item.id"></label>
            </div>
            <div class="right">
              <div class="flex">
                <div class="image">
                  <img :src="item.img_url">
                </div>
                <div class="detail">
                  <div class="title">{{ item.name }}</div>
                  <div class="info">
                    <div class="price">
                      <span>￥{{ item.price }}</span>
                    </div>
                    <div class="ops">
                      <div class="num">
                        <van-stepper :disabled="disabledStep" @change="updateCart(item)" v-model="item.num" min="1"
                          :max="item.multi_buy_limit.first" />
                      </div>
                      <div class="del">
                        <img src="@/assets/img/cart/del.png" @click="remove(item.id)">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-submit-bar :price="total()" button-text="结算" @submit="onSubmit">
        <van-checkbox @click="changesAll" checked-color="#ee0a24" v-model="checkall">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <van-empty description="购物车空空如也，赶紧去逛逛吧！" v-else>
      <van-button round type="danger" class="bottom-button" @click="goSome('home')">去逛逛</van-button>
      <template #image>
        <img :src="require('@/assets/img/cart/logo.png')">
      </template>
    </van-empty>

  </div>
</template>

<script>
import vuex from "vuex"

export default {
  data() {
    return {
      checkall: true,
      disabledStep: false
    };
  },
  created() {
    this.getCartAsync().then(res => {
      console.log("初始化购物车数据", res);
      this.setCheckAll()
    })
  },
  methods: {
    ...vuex.mapActions(["updateCartAsync","getCartAsync","deletCartAsync"]),
    ...vuex.mapGetters(['getCartGoods']),
    total() {
      let all = 0
      this.getCartGoods().forEach(item => {
        if (item.sel) {
          all += item.num * item.price
        }
      })
      return all * 100
    },
    changesAll() {
      if (this.checkall) {
        this.getCartGoods().forEach(item => {
          if (item.sel == 0) {
            item.sel = 1;
            this.updateCart(item)
          }
        })
      }
      else {
        this.getCartGoods().forEach(item => {
          item.sel = 0;
          this.updateCart(item)
        })
      }
    },
    setCheckAll() {
      // let all = true;
      this.checkall = this.getCartGoods().every(item => {
        return item.sel == 1;
      })
    },
    updateCart(good) {
      this.disabledStep = true;
      this.updateCartAsync(good).then(res => {
        console.log(res);
        this.setCheckAll();
        this.disabledStep = false;
      })
    },
    goSome(name) {
      this.$router.push({ name })
    },
    onSubmit() {
      console.log("点击了提交");
    },
    remove(id) {
      // console.log(id);
      this.$dialog.confirm({
        message: '很抢手哦~下次不一定能买到\n确认要删除吗~',
        confirmButtonText: '狠心删除',
        cancelButtonText: "留在购物车",
        confirmButtonColor: "#007aff",
        cancelButtonColor: "#007aff"
      })
        .then(() => {
          this.deletCartAsync(id).then(res => {
            if (res.code == 0) {
              this.$toast("删除成功")
            }
          })
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  },
};
</script>

<style lang="less">
.cart {
  img {
    width: 100%;
  }

  .van-nav-bar {
    border-bottom: 1px solid #f0f0f0;
    background-color: white;

    .van-nav-bar__content {
      .van-nav-bar__right {
        .home {
          margin-left: 10px;
          vertical-align: top;
          height: 22px;
          display: inline-block;
          margin-top: 1px;
          background-color: white;
          width: 22px;
        }

        .person {
          width: 24px;
          height: 24px;
          display: inline-block;
          margin-left: 10px;
        }
      }
    }
  }

  .van-empty {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .van-empty__image {
      width: 100px;
      height: 100px;
    }

    .van-empty__description {
      margin: 20px 0 30px;
      color: #333;
      font-size: 15px;
    }

    .van-empty__bottom {
      margin-top: 0px;

      button {
        width: 120px;
        height: 40px;
        display: block;
        background-color: #e31436;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
      }
    }
  }

  .goods {
    position: fixed;
    top: 46px;
    left: 0;
    width: 100vw;
    bottom: 50px;
    overflow-y: auto;

    .content {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 10px;
      margin-bottom: 10px;
      position: relative;
      background-color: #fff;

      .items {
        .item {
          display: flex;
          color: #333;
          font-size: 12px;
          user-select: none;
          padding: 12px 0 0;
          background-color: #fff;

          .left {
            width: 45px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;

            input[type='checkbox'] {
              display: none;
            }

            input[type='checkbox']+label {
              display: flex;
              width: 20px;
              height: 20px;
              align-items: center;
              background-image: url("@/assets/img/cart/check.png");
              background-size: 100%;
            }

            input[type='checkbox']:checked+label {
              background-image: url("@/assets/img/cart/checked.png");
            }
          }

          .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 330px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;

            .flex {
              display: flex;
              margin-bottom: 10px;

              .image {
                position: relative;
                width: 90px;
                height: 90px;
                border-radius: 5px;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }

              .detail {
                display: flex;
                flex-direction: column;
                flex: 1;
                padding: 0 15px 0 12px;
                box-sizing: border-box;
                background-color: white;

                .title {
                  color: #333;
                  font-size: 13px;
                  word-break: break-all;
                  display: -webkit-box;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;

                }

                .info {
                  display: flex;
                  flex: 1;

                  .price {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    margin-top: 7px;
                    margin-right: 1px;
                    line-height: 1;
                    font-size: 13px;
                    color: red;
                  }

                  .ops {
                    display: flex;
                    flex-direction: column;
                    padding-top: 9px;

                    .num {
                      display: inline-block;
                      border: 1px solid #aaa;
                      border-radius: 2px;
                      overflow: hidden;
                      user-select: none;

                      .van-stepper {
                        display: flex;

                        .van-stepper__minus {
                          width: 24px;
                          height: 25px;
                          position: relative;
                          border-right: 1px solid #aaa;
                        }

                        .van-stepper__minus:before {
                          position: absolute;
                          top: 50%;
                          left: 50%;
                          transform: translate3d(-50%, -50%, 0);
                          content: "";
                          display: block;
                          width: 0.266667rem;
                          height: 2px;
                          background-color: #666;
                        }

                        .van-stepper__input {
                          min-width: 41px;
                          line-height: 25px;
                          text-align: center;
                          font-weight: 700;
                        }

                        .van-stepper__plus {
                          width: 24px;
                          height: 25px;
                          position: relative;
                          border-left: 1px solid #aaa;
                        }

                        .van-stepper__plus:after,
                        .van-stepper__plus:before {
                          position: absolute;
                          top: 50%;
                          left: 50%;
                          transform: translate3d(-50%, -50%, 0);
                          content: "";
                          display: block;
                          background-color: #666;
                        }

                        .van-stepper__plus:after {
                          width: 2px;
                          height: 10px;
                        }

                        .van-stepper__minus,
                        .van-stepper__plus,
                        .van-stepper__input {
                          background-color: white;
                          height: 25px;
                        }
                      }
                    }

                    .del {
                      display: flex;
                      flex: 1;
                      justify-content: flex-end;
                      align-items: flex-end;
                      min-width: 14.5px;
                      margin-top: 5px;

                      img {
                        width: 14.5px;
                        height: 16.5px;
                        display: block;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .van-submit-bar {
      position: sticky;
      bottom: 0;

      .van-submit-bar__bar {
        display: flex;
        height: 50px;
        align-items: stretch;
        background-color: #fff;
        padding: 0px;

        .van-checkbox {
          display: flex;
          box-sizing: border-box;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          font-size: 12px;
          align-items: center;
          padding-left: 10px;
        }

        .van-submit-bar__text {
          flex: 1;
          justify-content: flex-end;
          align-items: flex-start;
          padding-right: 10px;
          padding-top: 10px;
          display: flex;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;

          span {
            font-size: 13px;
            color: #333;
          }

          .van-submit-bar__price {
            color: #e31436;
            font-size: 18px;
            font-weight: 700;
          }
        }

        .van-button {
          display: flex;
          width: 98.5px;
          justify-content: center;
          align-items: stretch;
          border-radius: 0px;
          background-image: linear-gradient(-225deg, red 15%, #ff3163 85%);
          padding: 0 25px;
          color: #fff;
          height: 50px;

          .van-button__content {
            display: flex;
            align-items: center;
            font-size: 15px;

          }
        }
      }
    }
  }
}

.van-dialog {
  .van-dialog__footer {
    .van-dialog__cancel {
      font-weight: bolder;
    }
  }
}
</style>